<template>
  <div>
    <div style="display: flex" class="header">
      <el-upload
        ref="upload"
        class="upload-demo"
        :action="uploadPath"
        :data="{ prjId: this.prjId, stepId: this.stepId }"
        :headers="myHeaders"
        v-loading.fullscreen.lock="fullscreenLoading"
        element-loading-text="正在导入，请稍后"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :before-upload="beforeUpload"
        :on-success="handleSuccess"
        :auto-upload="false"
        :limit="1"
      >
        <el-button slot="trigger" size="small" type="primary">
          选择文件
        </el-button>
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="uploadData"
        >
          上传到服务器
        </el-button>
        <div slot="tip" class="el-upload__tip">只能上传模板文件</div>
      </el-upload>
      <a @click="download" style="line-height: 32px; margin-left: 10px">
        点击下载模板
      </a>
    </div>
    <div class="container">
      <el-table :data="datas">
        <el-table-column
          width="80"
          label="序号"
          prop="DSFL_ID"
        ></el-table-column>
        <el-table-column label="文件名" prop="DSFL_Name"></el-table-column>
        <el-table-column
          width="120"
          label="上传人"
          prop="USR_Name"
        ></el-table-column>
        <el-table-column
          width="200"
          label="上传时间"
          prop="DSFL_UploadDate"
        ></el-table-column>
        <el-table-column width="120" label="状态">
          <template slot-scope="scope">
            <span>
              {{ scope.row.DSFL_Status == 1 ? '上传成功' : '上传失败' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          width="200"
          label="备注"
          prop="DSFL__Remark"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>
  <script>
import store from '@/store'
import { baseURL, tokenName, empIdName } from '@/config'
import { GetImportFiles } from '@/api/project/surveyUpload.js'
export default {
  computed: {},
  data: function () {
    return {
      prjId: 0,
      stepId: 0,

      myHeaders: {},
      uploadPath: baseURL + '/api/Project/SurveyUpload/ImportBaseExcel',
      fullscreenLoading: false,
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      addImgVis: false,
      datas: [],
      fileList: [],
    }
  },
  methods: {
    uploadData() {
      this.$refs.upload.submit()
    },
    download() {
      window.location.href =
        baseURL + `${'/tempfile'}/${encodeURI('导入模板.xls')}`
    },
    doGetDSFile() {
      GetImportFiles().then((r) => {
        this.datas = r.data
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    beforeUpload(file) {
      console.log(file.type)
      //if (file.type != 'application/vnd.ms-excel') {
      //  this.$message.error('上传文件格式有误!')
      //  return false
      //}
      this.fullscreenLoading = true
    },
    handleSuccess() {
      this.$refs.upload.clearFiles()
      this.fullscreenLoading = false
      this.doGetDSFile()
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
  },
  created() {
    this.myHeaders[tokenName] = this.$store.getters['user/accessToken']
    this.myHeaders[empIdName] = this.$store.getters['user/curEmp'].EMP_ID
  },
  mounted: function () {
    this.prjId = this.$route.query.id
    this.stepId = this.$route.query.stepid

    this.doGetDSFile()
  },
}
</script>
  
  <style scoped>
.header {
  padding: 20px;
}
.container {
  padding: 20px 10px;
}
</style>
  